<link href="../lib/jqgrid/css/jqgrid.css" type="text/css" rel="stylesheet"/>
<script src="../lib/jquery-1.8.2.min.js"></script>
<script src="../lib/jquery-ui.custom.min.js"></script>
<script src="../lib/jqgrid/js/jquery.jggrid.zh-cn.js"></script>
<script src="../lib/jqgrid/js/jquery.jqgrid.min.js"></script>

<table id="gfrc1"></table>
<div id="pgfrc1"></div>

<script>
$(function(){
    pageInit();
});
function pageInit(){
    jQuery("#gfrc1").jqGrid({
        datatype: "local",
        colNames: ['InvNo', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
        colModel: [
            {name: 'id', index: 'id', width: 60, align: 'center', sorttype: 'date', frozen : true},
            {name: 'name', index: 'name', width: 100, frozen : true },
            {name: 'amount', index: 'amount', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
            {name: 'tax', index: 'tax', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
            {name: 'total', index: 'total', width: 75, formatter: 'number', sorttype: 'number', align: 'right'},
            {name: 'closed', index: 'closed', width: 75, align: 'center', formatter: 'checkbox',
                edittype: 'checkbox', editoptions: {value: 'Yes:No', defaultValue: 'Yes'}},
            {name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
                edittype: 'select', editoptions: {value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime'}},
            {name: 'note', index: 'note', width: 220, sortable: false}
        ],
        rowNum:10,
        width:700,
        rowList:[10,20,30],
        pager: '#pgfrc1',
        sortname: 'name',
        viewrecords: true,
        sortorder: "desc",
        shrinkToFit: false,
        height: 'auto'
    });
    jQuery("#gfrc1").jqGrid('setFrozenColumns');
    var mydata = [
        {id:"1",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"2",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"3",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"4",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"5",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"6",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"7",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"8",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"9",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
        {id:"10",ship_via:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
    ];
    for(var i=0;i<=mydata.length;i++){
        jQuery("#gfrc1").jqGrid('addRowData',i+1,mydata[i]);
    }
}
</script>